<template>
    <div ref="chartRef" class="chart-container"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';

const chartRef = ref(null);
let chartInstance = null;

onMounted(() => {
    if (chartRef.value) {
        chartInstance = echarts.init(chartRef.value);

        const option = {
            title: {
                text: '销售数据统计',
                left: 'center'
            },
            xAxis: {
                type: 'category',
                data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [120, 200, 150, 80, 70, 110],
                type: 'bar',
                itemStyle: {
                    color: '#3398db'
                },
                barWidth: '5%'
            }, {
                data: [120, 200, 150, 80, 70, 110],
                type: 'bar',
                itemStyle: {
                    color: '#3398db'
                },
                barWidth: '5%'
            }],
            tooltip: {
                trigger: 'axis'
            }
        };

        chartInstance.setOption(option);

        // 窗口大小变化时自适应
        window.addEventListener('resize', () => {
            chartInstance.resize();
        });
    }
});

// 组件卸载时销毁实例
import { onBeforeUnmount } from 'vue';
onBeforeUnmount(() => {
    if (chartInstance) {
        chartInstance.dispose();
        chartInstance = null;
    }
});
</script>

<style lang="scss" scoped>
.chart-container {
    width: 100%;
    height: 80vh;
    padding: 20px;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
</style>